<template>
  <view class="content">
    <!-- <view class="topSearchBox">
      <input class="uni-input" v-model="keyword" confirm-type="search" placeholder="搜索" />
    </view> -->
    <scroll-view class="scroll-view_H" scroll-y style="height: calc(100vh - var(--window-top))" enhanced
      show-scrollbar="false" @refresherrefresh="refresherrefreshFn" :refresher-triggered="triggered"
      refresher-enabled="true">
      <view class="main">
        <view class="categorybox">
          <scroll-view class="scroll-view_H" scroll-y style="height: calc(100vh - var(--window-top))" enhanced
            show-scrollbar="false">
            <view class="itemclas u-ellipsis" @click="changCategory('')" :class="{ active: !activeId }">全部
            </view>
            <view :id="key" v-for="(val, key) in categoryList" :key="key" class="itemclas u-ellipsis"
              @click="changCategory(key)" :class="{ active: key == activeId }">{{ val }}</view>
          </scroll-view>
        </view>
        <view class="goodsbox" style="flex:1;">
          <scroll-view class="scroll-view_H" style="height: calc(100vh - var(--window-top))" scroll-y
            show-scrollbar="false" @scrolltolower="lower">
            <view class="goodCard" v-for="item in goodsList" :key="item.id">
              <image :src="item.imgUrl ? item.imgUrl : '/static/index/noneImg.png'" mode="aspectFill" class="goodsImg">
              </image>
              <view class="goodInfo">
                <view class="goodsname u-ellipsis">{{ item.name }}</view>
                <view class="sub_title">进价：{{ item.purchasePrice }}元</view>
                <view class="flexBox">
                  <text class="txt">配送规格：{{ item.deliveryNorms }}KG</text>
                </view>
                <view class="flexBox">
                  <text class="txt" v-if="item.status == '0'">状态：正常</text>
                  <text class="txt" v-if="item.status == '1'">状态：停用</text>
                  <text class="txt" v-if="item.status == '2'">状态：淘汰</text>
                  <view class="btnBox" @click="addPointPurchase(item.id)" v-if="item.status == '0'">点采</view>
                </view>
              </view>
            </view>
            <uni-load-more :status="loading"></uni-load-more>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
    <cls-DragBtn is-dock :bottom-px="250" @btnClick="dianCaiclick">
      <view class="floatBox btn type-1">点采</view>
    </cls-DragBtn>
  </view>
</template>

<script>
import { getDictValueAndNameSource, reqGoodsList, reqAddPointPurchase } from '@/apis/member.js'
export default {
	name:"GenericGoods",
  data() {
    return {
      categoryList: {},
      keyword: '',
      activeId: '',
      goodsList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      },
      loading: 'loading', // 是否触发上拉加载
      triggered: false
    }
  },
  onLoad() {
    this.getCategoryList()
  },
  methods: {
    scroll() {

    },
    changCategory(id) {
      this.activeId = id
      this.goodsList = []
      this.page.pageNum = 1
      this.loading = "loading";
      this.reqGoodsList()
    },
    async getCategoryList() {
      const res = await getDictValueAndNameSource('NONSTANDARD_CATEGORY');
      this.categoryList = res.data;
      console.log(this.categoryList, 'this.categoryList');
      // this.activeId = '0'
      this.page.pageNum = 1
      this.reqGoodsList()
    },
    async reqGoodsList() {
      const res = await reqGoodsList({ ...this.page, category: this.activeId })
      if (res.code == 200) {
        this.goodsList = [...this.goodsList, ...res.data.list]
        console.log('商品列表', res.data);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },
    refresherrefreshFn() {
      this.categoryList = []
      this.goodsList = []
      this.page = {
        pageNum: 1,
        pageSize: 15
      }
      // this.activeId = ''
      this.triggered = true
      this.getCategoryList()
    },
    lower() {
      if (this.loading == "noMore") {
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      this.reqGoodsList();
    },
    dianCaiclick() {
      // 跳转页面
			this.$navTo('/pages/procure/noWaitSubmit')
    },
    async addPointPurchase(id) {
      const res = await reqAddPointPurchase({ commodityId: id })
      if (res.code == 200) {
        uni.showToast({
          title: '添加点采成功',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
view {
  box-sizing: border-box;
}

.topSearchBox {
  height: 60rpx;
  width: 100%;
  display: flex;
  font-size: 24rpx;
  align-items: center;
  padding: 10rpx 30rpx;
  line-height: 40rpx;
  margin-bottom: 16rpx;

  .uni-input {
    flex: 1;
    height: 50rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
    background-color: #eaeaea;
    border-radius: 30rpx;
    border: 1px solid #ccc;
  }
}

.content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
}

.main {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--window-top));
  flex: 1;
}

.categorybox {
  height: 100%;
  width: 180rpx;
  overflow: hidden;
  color: #444;
  background-color: #f6f6f6;
  font-size: $uni-font-size-small;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  height: 100%;

  .itemclas {
    padding: 10rpx 10rpx;
    height: 80rpx;
    text-align: center;
    line-height: 50rpx;
    border-left: 4px solid #f6f6f6;
  }

  .active {
    background-color: #fff;
    border-left: 4px solid $uni-main-bgColor;
    font-weight: 600;
    color: $uni-main-bgColor;
    font-size: $uni-font-size-base;
  }
}

.goodsbox {
  font-size: $uni-font-size-small;
  line-height: 36rpx;

  .goodCard {
    padding: 20rpx;
    box-sizing: border-box;
    padding-left: 20rpx;

    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .goodsImg {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;
      border: 1px solid #eee;
      background-color: #f7f7f7;
    }

    .goodInfo {
      height: 200rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      // justify-content: space-evenly;
      justify-content: space-between;
    }

    .goodsname {
      font-weight: 600;
      width: 300rpx;
      font-size: $uni-font-size-upBase;
      margin-bottom: 10rpx;
    }

    .sub_title {
      font-size: $uni-font-size-mini;
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
      font-size: $uni-font-size-mini;
      // flex: 1;
      line-height: 60rpx;
      width: 100%;
    }

    .btnBox {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 10rpx;
      background-color: $uni-main-bgColor;
      text-align: center;
      color: #fff;
    }
  }
}

.floatBox {
  // position: fixed;
  // bottom: 150rpx;
  // right: 50rpx;
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx !important;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3);
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  padding: 10rpx;
  box-sizing: border-box;
}
</style>
